<template>
  <div class="orderdetail-contain">
    <div class="state">
      <span>{{ statusText }}</span>
      <img src="../assets/images/car.png" alt="" />
    </div>
    <div class="address">
      <div class="icon">
        <van-icon name="logistics" />
      </div>
      <div class="addressinfo">
        {{ address.name }} - {{ address.tel }} - {{ address.province }} -
        {{ address.city }} - {{ address.country }} -
        {{ address.addressDetail }}
      </div>
    </div>
    <div class="orders">
      <div class="order" v-for="item in orders" :key="item.id">
        <img :src="item.thumb_path" />
        <div class="text">
          <div class="title">{{ item.title }}</div>
          <span class="price">￥{{ item.sell_price }}</span>
        </div>
      </div>
    </div>
    <div class="order-info">
      <div class="text">
        <span>下单时间</span
        ><span>{{ $momentFun(orderInfo.add_time * 1000) }}</span>
      </div>
      <div class="text">
        <span>商品总价</span><span>{{ orderInfo.total_price }}</span>
      </div>
      <div class="text">
        <span>商品数量</span><span>{{ orderInfo.number }}</span>
      </div>
      <div class="text" v-if="orderInfo.status">
        <span>实付款</span><span>￥{{ orderInfo.actual_price }}</span>
      </div>
      <div class="text">
        <span>付款方式</span><span>{{ orderInfo.pay_way }}</span>
      </div>
      <div class="text"><span>运费险</span><span>￥0.00</span></div>
      <div class="text">
        <span>订单号</span
        ><span
          ><span>{{ orderInfo.order_id }}</span>
          <span @click="copy"> 复制</span></span
        >
      </div>
      <div class="text">
        <span>联系客服</span
        ><van-tag plain type="primary" @click="relation">联系客服</van-tag>
      </div>
    </div>
    <div class="btn">
      <van-button
        type="danger"
        v-if="orderInfo.status === 0 && orderInfo.is_cancel === 0"
        @click="pay(orderInfo.order_id)"
        >立即付款</van-button
      >
      <van-button
        type="primary"
        v-if="
          orderInfo.status === 1 &&
          orderInfo.is_out == 0 &&
          orderInfo.is_finish === 0
        "
        @click="$toast('已提醒商家')"
        >提醒发货</van-button
      >
      <van-button
        type="primary"
        v-if="
          orderInfo.status === 1 &&
          orderInfo.is_out === 1 &&
          orderInfo.is_finish === 0
        "
        @click="isShowFlow = true"
        >查看物流</van-button
      >
      <van-button type="primary" v-if="orderInfo.is_finish === 1"
        >已完成</van-button
      >
      <van-button type="danger" v-if="orderInfo.is_cancel === 1" disabled
        >订单已取消</van-button
      >
    </div>
    <van-dialog v-model:show="isQrcode" title="扫码付款" @confirm="confirm">
      <div style="display: flex; align-items: center; justify-content: center">
        <img :src="pay_url" />
      </div>
    </van-dialog>
    <van-popup
      v-model:show="isShowFlow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="address">
        <div class="icon">
          <van-icon name="logistics" />
        </div>
        <div class="addressinfo">
          {{ address.name }} - {{ address.tel }} - {{ address.province }} -
          {{ address.city }} - {{ address.country }} -
          {{ address.addressDetail }}
        </div>
      </div>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="(item, index) in flowInfo" :key="index">
          <h3>{{ item.location }}</h3>
          <p>{{ item.time }}</p>
        </van-step>
      </van-steps>
    </van-popup>
  </div>
</template>

<script setup>
import { Toast, Dialog } from "vant";
import {
  getShopCarList,
  reqgetOrderInfo,
  reqgetPayQrcode,
  reqgetPayStatus,
  reqmaterialFlow,
} from "@/api";
import QRCode from "qrcode";
import { useRoute, useRouter } from "vue-router";
const $route = useRoute();
const $router = useRouter();
import useShopStore from "@/store/shop";
const shopStore = useShopStore();
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
const address = ref({});
const orderIds = ref([]);
const orders = ref([]);
const orderInfo = ref({});
const isQrcode = ref(false);
const pay_url = ref("");
const timer = ref("");
const isShowFlow = ref(false);
const active = ref(1);
const flowInfo = ref([]);

const statusText = computed(() => {
  // 未支付
  if (orderInfo.value.status === 0 && orderInfo.value.is_cancel === 0) {
    return "等待付款";
  }
  // 支付了，未发货
  if (
    orderInfo.value.status === 1 &&
    orderInfo.value.is_out === 0 &&
    orderInfo.value.is_finish === 0
  ) {
    return "待发货";
  }
  // 支付了，已发货
  if (
    orderInfo.value.status === 1 &&
    orderInfo.value.is_out === 1 &&
    orderInfo.value.is_finish === 0
  ) {
    return "包裹正在派送中...";
  }
  // 已完成
  if (orderInfo.value.is_finish === 1) {
    return "已完成";
  }
  // 已取消
  if (orderInfo.value.is_cancel === 1) {
    return "已取消";
  }
  return "";
});

const confirm = () => {
  isQrcode.value = false;
};

// 复制
const copy = () => {
  navigator.clipboard
    .writeText(orderInfo.value.order_id)
    .then(() => {
      Toast("复制完成");
    })
    .catch(() => {});
};

// 支付
const pay = async (orderId) => {
  let { status, data } = await reqgetPayQrcode(orderId);
  if (status == 200) {
    const url = await QRCode.toDataURL(data.code_url);
    isQrcode.value = true;
    pay_url.value = url;
  } else {
    Toast("生成二维码失败");
  }
};

// 联系
const relation = () => {
  Dialog.confirm({
    message: "请拨打 18870946508",
    confirmButtonText: "拨打",
    confirmButtonColor: "red",
  })
    .then(() => {})
    .catch(() => {});
};

// 获取订单信息
const getOrderInfo = async () => {
  let data = await reqgetOrderInfo($route.params.orderSerialNum);
  orderInfo.value = data;
  address.value = data.address_info;
  orderIds.value = shopStore.shopCarList.map((item) => item?.id);
  let { message } = await getShopCarList(orderInfo.value.goods_ids);
  orders.value = message;
};

// 获取订单状态
const getOrderStatus = () => {
  if (orderInfo.value.status === 1) {
    clearInterval(timer.value);
    return;
  }
  timer.value = setInterval(async () => {
    let { code, message } = await reqgetPayStatus($route.params.orderSerialNum);
    if (code === 20000) {
      clearInterval(timer.value);
      isQrcode.value = false;
      getOrderInfo();
      Toast.success({
        message,
        icon: "wechat-pay",
      });
    }
  }, 2000);
};

onMounted(async () => {
  await getOrderInfo();
  let data = await reqmaterialFlow();
  flowInfo.value = data;
  getOrderStatus();
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
  isQrcode.value = false;
});
</script>

<style lang="scss" scoped>
.orderdetail-contain {
  background: #fff;
  // height: 100vh;
  .state {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 90px;
    font-size: 18px;
    color: #fafafa;
    background: #e35818;

    img {
      width: 80px;
      height: 80px;
    }
  }

  .address {
    display: flex;
    padding: 6px;
    margin: 10px 0;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 30px;
      margin-right: 10px;
      color: #fff;
      background: #f34a09;
      border-radius: 50px;
    }

    .addressinfo {
      font-size: 14px;
      line-height: 20px;
    }
  }

  .orders {
    .order {
      display: flex;
      align-items: center;
      height: 104px;
      padding: 0 10px;
      margin-bottom: 5px;
      background: #fafafa;

      img {
        width: 88px;
        height: 88px;
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 80px;
        font-size: 12px;
        line-height: 18px;

        .price {
          font-size: 16px;
        }
      }
    }
  }

  .order-info {
    padding: 0 10px;
    font-size: 14px;
    color: #787373;

    .text {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .van-tag {
        padding: 5px 3px;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 10px #ccc;
  }
}
</style>
